@extends('admin.layout')
@section('content')

     <section id="main-content">
             
    <!-- BEGIN WRAPPER  -->
        <section class="wrapper">

        <section class="panel">
            <header class="panel-heading">
               <span class="label label-primary" id="open_form"><b>打开添加表格</b></span>
               <span class="label label-primary" id="close_form"><b>关闭添加表格</b></span>
               <span class="tools pull-right">
               <a href="javascript:;" class="fa fa-chevron-down"></a>
               <a href="javascript:;" class="fa fa-times"></a>
               </span>
            </header>
                    <div class="box">
                    <div class="row">
                       
                    </div>
                        
                        <div class="box-body table-responsive no-padding">
                        <div id="mytable" 
                        @if($display == '1')
                        style="display:block;"
                        @else
                        style="display:none;"
                        @endif
                        >
                        
                            <form action="{{ url('admin/goods/updateDetail') }}" method="post" enctype="multipart/form-data">
                                {{ csrf_field() }}
                                <h4>商品添加表格</h4>
                                <table class="table table-hover">
                                <tr>
                                    <th>商品图片</th>                                    
                                    <th>商品颜色</th>                                    
                                    <th>网络制式</th>                                    
                                    <th>机身内存</th>
                                    <th>商品库存</th>
                                    <th>商品价格</th>
                                </tr>
                                <tr>
                                    <input type="hidden" name="good_id" value="{{ $good_id }}">
                                   <td><input id="good_img" type="file" name='good_img' style="width:150px"></td> 
                                   <td><input id="good_color" type="text" name="good_color" style="width:60px" value=""></td> 
                                   <td><input id="good_net_type" type="text" name="good_net_type" style="width:60px" value=""></td> 
                                   <td><input id="good_ROM" type="text" name="good_ROM" style="width:60px" value=""></td> 
                                   <td><input id="good_store" type="number" name="good_store" style="width:60px" value=""></td> 
                                   <td><input id="good_price" type="text" name="good_price" style="width:60px" value=""></td> 
                                   <td><button>提交</button></td>
                                </tr>
                                  
                                </table>
                            </form>
                            </div>
                            
                        
                        <hr>
                        <h4>商品详情表</h4>
                            <table class="table table-hover">
                                <tbody><tr>
                                    <th>ID</th>
                                    <th>商品ID</th>
                                    <th>商品图片</th>                                    
                                    <th>商品颜色</th>                                    
                                    <th>网络制式</th>                                    
                                    <th>机身内存</th>
                                    <th>商品库存</th>
                                    <th>商品价格</th>
                                    <th>操作</th>
                                </tr>
                                

                                @foreach ($data as $good_detail)
                                    <tr>
                                    <td class="ids">{{ $good_detail -> id }} </td>
                                    <td class="good_id">{{ $good_detail -> good_id }} </td>
                                    <td><img src="{{ url('/upload/'.$good_detail -> good_img) }}" width='50px'> </td>
                                    <td class="good_color">{{ $good_detail -> good_color }} </td>
                                    <td class="good_net_type">{{ $good_detail -> good_net_type }} </td>
                                    <td class="good_ROM">{{ $good_detail -> good_ROM }} </td>
                                    <td class="good_store">{{ $good_detail -> good_store }} </td>
                                    <td class="good_price">{{ $good_detail -> good_price }} </td>                                  
                                    
                                    <td><a href="{{ url('admin/goods/goodedit/edit/editDetail') }}/{{ $good_detail -> id }}/{{ $good_detail -> good_id }}"><span class="label label-success">编辑</span></a> || <a href="{{ url('admin/goods/goodedit/deleteDetail') }}/{{ $good_detail -> id }}"><span class="label label-danger">删除</span></a></td>
                                </tr>
                                @endforeach

                            </tbody>
                            </table>
                            
                        </div><!-- /.box-body -->
                    </div><!-- /.box -->
         </section>
    <!-- END WRAPPER  -->
      </section>
      <!-- END MAIN CONTENT -->
                
        <script type="text/javascript">
        window.onload=function(){
             $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

             // alert($);

             $('#open_form').on('click',function(){
                // alert('1111111');
                $('#mytable').css('display','block');
                // alert('111');
             });

             $('#close_form').on('click',function(){
                // alert('1111111');
                $('#mytable').css('display','none');
                // alert('111');
             });

              // 双击修改用户名
            $('.good_color').on('dblclick',dblclick);
            // 双击修改用户名
            $('.good_net_type').on('dblclick',dblclick);
            // 双击修改用户名
            $('.good_ROM').on('dblclick',dblclick);
            // 双击修改用户名
            $('.good_store').on('dblclick',dblclick);
            // 双击修改用户名
            $('.good_price').on('dblclick',dblclick);

            
            // 商品名称的双击事件函数
            function dblclick(){
                // alert('111');
                // 获取id
                var id=$(this).parent().find('.ids').html();
                // 获取当前元素
                var t=$(this);
                // console.log(t);
                var attr_name =t.attr('class');
                // alert(attr_name);
                if(attr_name=='good_color' || attr_name=='good_net_type' || attr_name=='good_ROM' || attr_name=='good_store' || attr_name=='good_price'){
                    // 获取之前的名字
                    var oldData=$(this).html();
                    // 将要求的框改为input框
                    var ips= $("<input type='text' />");
                    // 将input框内容默认为 oldName
                    ips.val(oldData);
                    // 将 input 框整体放入当前元素中
                    $(this).html(ips);

                    ips.select();

                    ips.on('blur',function(){
                        // 获取ips内容
                        var newData=ips.val();
                        // alert(newName);
                        $.ajax({
                                url:"{{ url('admin/goods/goodedit/ajaxUpdateDetail') }}",
                                type:'POST',
                                data:{id:id, attr_name:attr_name, attr_value:newData},
                                success:function(data){
                                    // alert(data);
                                    if(data == 1){
                                        t.html(newData);
                                    }else{
                                        t.html(oldData);
                                        alert('数据库修改失败');
                                    }

                                    t.on('dblclick',dblclick);
                                    
                                },
                                error:function(){
                                     t.html(oldData);
                                    alert('数据修改失败');
                                     t.on('dblclick',dblclick);
                                },
                                dataType:'json'
                            });
                    });
                    t.unbind('dblclick');   
                }            
            }


           
            
        }
           
        </script>
@endsection